<template>
	<div class="Drainage">
		<!-- 引流模式 -->
		<!-- 代理充值598元，即可激活，分成30%
		团长充值1298元，即可激活，分成60%，团长可以下设代理，和分成比例 -->
		<el-tabs v-model="activeName">
		    <el-tab-pane label="代理/团长" name="first">
				<!-- 卡片列表 -->
				<div class="currentLevel">您当前等级为{{this.currentLevel.level}}，分成{{this.currentLevel.divide}}，可点击下方按钮升级</div>
				<el-container>
					<div class="box" 
						 v-for="(item,index) in list" 
						 :key="index"
						 @click="toPay(item.id)"
				    >
						<div class="box-pri">{{item.pri}}<span>元</span></div>
						<div class="box-des">
							<div>级别：{{item.level}}</div>
							<div>分成{{item.divide}}</div>
						</div>
					</div>
				</el-container>
			</el-tab-pane>
		</el-tabs>
		
		<div v-if="ejectPay" class="task">
			<img src="@/assets/close.png" @click="closeTask" class="close">
			<div v-if="!isPayok" class="img">
				<!-- <img src="@/assets/sys.png">
				<span class="qrspan">扫一扫</span> <br> -->
				<qrcode-vue class="qrcode" :value="qrcode" :size="size" level="H"></qrcode-vue>
				<img src="@/assets/safe.png">
				<span class="qrspan">支持微信支付</span>
			</div>
			<div v-else class="img">
				<img src="@/assets/paysuccess.png">
				<span>恭喜您，支付成功！</span>
			</div>
		</div>
	</div>
</template>

<script>
	
	import QrcodeVue from 'qrcode.vue'
	export default {
		components: {
		  QrcodeVue,
		},
		name:'Drainage',
		data(){
			return{
				activeName: 'first',
				list:[],
				currentLevel:{},
				ejectPay:false,
				qrcode:"",
				isPayok:false,
				myTimer:null,
				size: 240
			}
		},
		methods:{
			getAgentrule(){
				this.$http.get('getAgentrule').then((data)=>{
					if(data.data.success){
						this.list = data.data.data.list;
						this.currentLevel = data.data.data.currentLevel;
					}else{
						var num = data.data.msg.length;
						if ( num>1 ) this.$message({
							showClose: true,
							message: data.data.msg,
							type: 'error',
							offset:'65',
							duration:1000
						});
					}
				})
			},
			toPay(id){
				const loading = this.$loading({
					  lock: true,
					  text: 'Loading',
					  spinner: 'el-icon-loading',
					  background: 'rgba(0, 0, 0, 0.7)'
				});
				this.fullscreenLoading = true;
				this.$http.post('getPay',{priceId:id}).then((data)=>{
					if(data.data.success){
						this.ejectPay = true;
						this.qrcode = data.data.data.qrcode;
						this.getPayStatus(data.data.data.OrderID);
					}else{
						var num = data.data.msg.length;
						if ( num>1 ) this.$message({
							showClose: true,
							message: data.data.msg,
							type: 'error',
							offset:'65',
							duration:1000
						});
					}
					loading.close();
				})
			},
			closeTask(){
				this.ejectPay = false;
				clearInterval(this.myTimer)
			},
			getPayStatus(id){
				this.myTimer = setInterval(()=>{
					this.$http.post('getPayStatus',{OrderID:id}).then((data)=>{
						if(data.data.success){
							this.isPayok = data.data.data.isPayok
							clearInterval(this.myTimer)
							setTimeout(()=>{
								this.ejectPay = false;
								this.isPayok = false;
								this.getAgentrule()
							},1000)
						}else{
							var num = data.data.msg.length;
							if ( num>1 ) this.$message({
								showClose: true,
								message: data.data.msg,
								type: 'error',
								offset:'65',
								duration:1000
							});
						}
					})
				},2000)
			}
		},
		created () {
			this.getAgentrule()
		}
	}
</script>

<style scoped>
	.box-des,.card,.card-box{
		display: flex;
		align-items: center;
	}
	.box{
		width: 200px;
		border-radius: 5px;
		background-color: rgb(242,159,169);
		color: #FFFFFF;
		margin-right: 40px;
		margin-top: 20px;
		text-align: center;
	}
	.box-pri{
		font-size: 50px;
	}
	.box-pri>span{
		font-size: 30px;
	}
	.box-des{
		width: 100%;
		height: 30px;
		background-color: rgba(0,0,0,0.3);
		border-radius: 0 0 5px 5px;
		justify-content: space-around;
		font-size: 14px;
	}
	
	/* 当前等级 */
	.currentLevel{
		padding: 5px 16px;
		background-color: gold;
		display: inline-block;
		color: red;
	}
	/* 弹窗pay */
	.task{
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,.6);
		z-index: 998;
	}
	.img{
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		padding:10px;
		background-color: #fff;
		text-align: center;
	}
	.img>img{
		margin-right: 10px;
		width: 32px;
		height: 32px;
		vertical-align: middle;
	}
	
	.qrcode{
		margin: 10px 0;
	}
	.img>.qrspan{
		color: #000000;
	}
	.img>span{
		font-size: 24px;
		color: #0ec469;
		vertical-align: middle;
	}
	
	.close{
		position: fixed;
		right: 80px;
		top: 80px;
		width: 32px;
		height: 32px;
		opacity: .3;
	}
	.close:hover{
		opacity: 1;
	}
</style>
